<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular=true duration="400">
				<swiper-item class="swiper-item" v-for="(item,index) in goodsInfo.thumbs" :key="index">
					<view class="image-wrapper">
						<image :src="item" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section">
			<view class="title">{{goodsInfo.name}}</view>
			<view>
				<text class="ftitle" v-if="goodsInfo.intro">{{goodsInfo.intro}}</text>
			</view>

			<view class="price-box">
				<text class="price-tip"><view v-if="goodsInfo.discountPrice > 0 && goodsInfo.ptEnable"> 拼团 </view> ¥</text>
				<view v-if="goodsInfo.discountPrice > 0 && goodsInfo.ptEnable">
					<text class="price">{{goodsInfo.discountPrice }}</text>
					<text class="m-price">¥ {{goodsInfo.price}} </text>
					<text class="coupon-tip"> {{ (goodsInfo.discountPrice * 10 / goodsInfo.price).toFixed(2) }} 折</text>
				</view>
				<view v-else>
					<text class="price">{{goodsInfo.price}}</text>
				</view>
			</view>
			<view class="tn-flex tn-flex-direction-row">
				<view class="bot-row tn-flex-2">
					<text>销量: {{goodsInfo.salesCnt}}</text>
					<text v-if="goodsInfo.stock > 0">库存: {{goodsInfo.stock }}</text>
				</view>
				<view class="tn-padding-right tn-text-right">
					<button open-type="share" class="share-btn"> <view class="tn-icon-share-square"></view> </button>
				</view>
			</view>
		</view>

		<view class="c-list">
			<view class="c-row b-b"  v-if="specInfo && specInfo.specId">
				<text class="tit">尺寸规格</text>
				<view class="con">
					<text class="selected-text">
						{{ specInfo.specItems[0]['value'] + ' ' + specInfo.specItems[0]['unit'] }}
					</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<view class="c-row b-b tn-flex">
				<view class="tn-flex tn-flex-direction-row tn-flex-row-between tn-flex-basic-full">
					<view class="tn-flex tn-flex-row-left tn-flex-1">
						<text>购买份数 (1份={{ specInfo['minCnt'] || goodsInfo['minCnt'] }} 本)</text>
					</view>
					<view class="tn-flex tn-flex-row-right tn-flex-1">
						<text class="tn-icon-reduce tn-padding-right" @click="addReduce(0)"></text>
						<text class="">x{{ buyCnt }}</text>
						<text class="tn-icon-add tn-padding-left" @click="addReduce(1)"></text>
					</view>
				</view>
				
				<!-- <text class="con t-r "></text>
				<text class="con t-r "></text>
				<text class="con t-r jishuq" @click="addReduce(0)">-</text>
				<text class="con t-r jishuq">{{ buyCnt }}</text>
				<text class="con t-r jishuq" @click="addReduce(1)">+</text> -->
			</view>
			<view class="c-row b-b">
				<text class="tit">运费</text>
				<text class="con t-r ">{{ goodsInfo.freight ? '¥' + goodsInfo.freight : "包邮"}}</text>
			</view>
		<!-- 	<view class="c-row b-b">
				<text class="tit">促销活动</text>
				<view class="con-list">
					<text>新人首单送20元无门槛代金券</text>
					<text>订单满50减10</text>
					<text>订单满100减30</text>
					<text>单笔购买满两件免邮费</text>
				</view>
			</view> -->
			<!-- <view class="c-row b-b">
				<text class="tit">服务</text>
				<view class="bz-list con">
					<text>7天无理由退换货 ·</text>
				</view>
			</view> -->
		</view>
		
		<view class="detail-desc" v-if="goodsInfo && goodsInfo.ptEnable">
			<view class="d-header" style="border-bottom: 1px dotted gray; margin: 0 1em 1em 1em;">
				<text>进行中的拼团</text>
			</view>
			<view v-for="(item, index) in goodsInfo.ptOrderDtoList" :key="index" v-if="goodsInfo.ptOrderDtoList.length > 0">
				<view class="tn-flex tn-flex-direction-column">
					<view class="tn-flex tn-flex-direction-row tn-margin-bottom">
						<view class="tn-flex-2 tn-flex tn-flex-direction-row tn-flex-col-center tn-text-center">
							<!-- <tn-avatar class="tn-flex-1 tn-padding-left" size="lg" :src="item.members[0].avatar"></tn-avatar> -->
							<tn-avatar-group size="lg" :lists="memList(item.members)"></tn-avatar-group>
							<view class="tn-flex-1" style="font-weight: bold;">{{ item.members[0].nickName }}的团</view>
						</view>
						<view class="tn-flex-3 tn-flex-direction-column tn-text-left tn-flex-col-center tn-margin-left">
							<text class="tn-padding-top" v-if="!item.isFull">还差 <text style="color:orangered"> {{ item.ptNum - item.members.length }}人 </text> 拼成</text>
							<text class="tn-padding-top" v-else>已满员</text>
							<view class="tn-padding-top-sm">剩余 &nbsp; <tn-count-down fontColor="orangered" :timestamp="parseInt((item.endTime - new Date().getTime()) / 1000)"></tn-count-down></view>
						</view>
						<view class="tn-flex-1 tn-margin-right">
							<tn-button backgroundColor="orangered" fontColor="tn-color-white" shape="round" @click="ptBuy(item)" :disabled="item.isFull">参团</tn-button>
						</view>
						<hr/>
					</view>
				</view>
			</view>
			<view v-else>
				暂无进行中的拼团，直接开团吧~
			</view>
		</view>


		<view class="detail-desc">
			<view class="d-header">
				<text>详情介绍</text>
			</view>
			<!-- <rich-text :nodes="desc"></rich-text> -->
			<view v-for="(item,index) in goodsInfo.detailList" :key="index">
				<view class="tn-flex tn-margin-bottom tn-margin-top" v-if="item.title">
					<view class="tn-flex tn-flex-col-center">
						<view class="tn-radius bg-flex-shadow tn-shadow-blur tn-margin-left-xs"
							style="width: 10rpx; height: 40rpx; border-radius: 12rpx; background-color:darkorange">
						</view>
						<view class="tn-text-bold tn-padding-left-sm" style="font-size: 34rpx;">{{ item.title }}</view>
					</view>
				</view>
				<view v-if="item.intro" class="d-intro tn-margin-bottom tn-margin-left tn-margin-right">
					{{ item.intro }} </view>
				<image :src="img" class="xasd" mode="aspectFill" v-for="(img, i) in item.imgs"></image>
			</view>
		</view>

		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<!-- <navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-xiatubiao--copy"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="yticon icon-gouwuche"></text>
				<text>购物车</text>
			</navigator> -->
			 <view class="p-b-btn" style="padding-left: 1em;" v-if="goodsInfo && goodsInfo.ptEnable" @tap="chooseImg(false)">
				<text class="yticon icon-gouwuche"></text>
				<text style="color:black">直接购买</text>
			</view> 

			<view class="action-btn-group">
				<button type="primary" class="action-btn no-border buy-now-btn" :disabled="!goodsInfo || !goodsInfo.goodsId"
				@click="chooseImg(goodsInfo.ptEnable)">我已阅读详情，立即{{ goodsInfo.ptEnable ? '开团' : '定制' }} 
				</button>
				<!-- <button type="primary" class=" action-btn no-border add-cart-btn" @click="buy(0)">加入购物车</button> -->
			</view>
		</view>


		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec"
			v-if="specInfo.specItems">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="goodsInfo.thumbs[0]"></image>
					<view class="right">
						<text class="price">¥{{specInfo.price}}</text>
						<text class="stock" v-if="specInfo.stock > 0">库存：{{specInfo.stock}}件</text>
						<view class="selected">
							已选：
							<text class="selected-text">
								尺寸 / {{ specInfo.specItems[0]['value']}} {{ specInfo.specItems[0]['unit']}}
							</text>
						</view>
					</view>
				</view>

				<view class="item-list">
					<text class="selected tit">尺寸 </text>
				</view>
				<view class="item-list">

					<text v-for="(childItem, childIndex) in goodsInfo.specList" :key="childIndex" class="tit"
						:class="{selected: childItem.specId == specInfo.specId}" @click="selectSpec(childIndex)">
						{{ childItem.specItems[0]['value'] }}
					</text>
				</view>

				<button class="btn" @click="toggleSpec">选择</button>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		components: {},
		data() {
			return {
				goodsId: 0,
				specClass: 'none',
				specSelected: [],
				favorite: true,

				goodsInfo: {}, //商品详情
				buyCnt: 1,
				specInfo: {}, // 当前选中的商品信息
			};
		},
		async onLoad(options) {
			this.$shareTitle = "商品详情"
			this.goodsId = options.id;
			this.loadGoodsInfo();
		},
		methods: {
			//规格弹窗开关
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(index) {
				this.specInfo = this.goodsInfo.specList[index]
				console.log('选择了新的规格:', this.specInfo);
			},
			addReduce(id) {
				if (id == 0) {
					console.log(id)
					if (this.buyCnt > 1) {
						this.buyCnt = this.buyCnt - 1;
					}
				} else {
					this.buyCnt = this.buyCnt + 1;
				}
			},
			async loadGoodsInfo() {
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchGoodsInfo(),
					method: "get",
					data: {
						goodsId: this.goodsId,
					},
					dataType: 'json',
					success: function(result, status) {
						_this.goodsInfo = result;
						_this.buyCnt = 1;
						if (result.specList && result.specList.length > 0) {
							_this.specInfo = result.specList[0];
							
						}
						
						if (_this.goodsInfo.ptOrderDtoList && _this.goodsInfo.ptOrderDtoList.length > 0) {
							for (let ptOrder of _this.goodsInfo.ptOrderDtoList) {
								let isFull = ptOrder.ptNum - ptOrder.members.length == 0;
								ptOrder.isFull = isFull
							}
						}
						
						console.log('商品详情: ', _this.goodsInfo);
						_this.$shareTitle = _this.goodsInfo.name
						_this.$shareImg = _this.goodsInfo.thumbs[0]
						_this.$shareParam = `/pages/product/product?id=${_this.goodsInfo.goodsId}`
					},
				});
			},
			ptBuy(ptItem) {
				// 选中团，进行下单
				this.chooseImg(true, ptItem)
			},
			chooseImg(ptEnable, ptItem = null) {
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					let data = {
						"goodsId": this.goodsId,
						"goodsInfo": this.goodsInfo,
						"specInfo": this.specInfo,
						"buyCnt": this.buyCnt,
						"ptEnable": ptEnable, // 判断是否走拼团下单
						"ptItem": ptItem,
					}

					if (!this.goodsInfo.specList || this.goodsInfo.specList.length == 0) {
						// 没有尺寸时, 直接进入下单详情
						uni.navigateTo({
							url: `/pages/order/createOrder`, //建议这么写
							// 版本2.8.9+ 支持
							success: (res) => {
								// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
								res.eventChannel.emit('sendPayGoods', data)
							}
						})
					} else {
						uni.navigateTo({
							url: `/pages/cropper/cropper`, //建议这么写
							// 版本2.8.9+ 支持
							success: (res) => {
								// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
								res.eventChannel.emit('sendPayGoods', data)
							}
						})
					}

				} else {
					uni.showToast({
						title: '用户未登录！请先登录',
						icon: 'none'
					});
					this.$API.toLoginPage();
				}

			},
			memList(ptItemMembers) {
				let items = []
				for (let mem of ptItemMembers) {
					items.push({
						src: mem.avatar
					})
				}
				return items;
			},
			buy(e) {
				let userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					let data = {
						"goodsid": this.id,
						"specsid": this.specList.specsid,
						"specsname": this.name,
						"fitid": this.specList.id,
						"fitname": this.specList.name,
						"price": this.specList.price,
						"ioc": this.bydata.ioc,
						"title": this.bydata.title,
						"freight": this.bydata.freight,
						"eliminate": e,
						"mun": this.mun,
						"uid": userInfo.id
					}

					console.log(data)
					api.post('Cart/add', data).then(res => {
						if (e == 1) {
							uni.navigateTo({
								url: `/pages/order/createOrder?id=` + res.data
							})
						}
					})
				} else {
					uni.showToast({
						title: '用户未登录！请先登录',
						icon: 'none'
					});
					this.$API.toLoginPage();
				}

			},
			stopPrevent() {}
		},

	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			width: 95vw;
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
			letter-spacing: 3upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.ftitle {
			font-size: 25upx;
			color: #a6a9b0;
			height: 35upx;
			line-height: 35upx;
			letter-spacing: 3upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $uni-color-primary;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $uni-color-primary;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}
	
	.share-btn {
		flex: 1;
		background: white;
		text-align: right;
		font-size: $font-lg;
		padding: 0;
		color: $uni-color-primary;
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm+2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 16upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		/* left: 30upx; */
		bottom: 0;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 120upx;
		background: white;
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);
		/* border-radius: 16upx; */

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-light;
			width: 196upx;
			height: 80upx;
			padding-left: 1em;
			padding-right: 1em;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			width: 95%;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, .5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				font-size: $font-base ;
				padding: 20rpx;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	.zkf {
		background-color: rgba(255, 255, 255, 0.1);
	}

	button::after {
		border: none
	}

	.xasd {
		width: 100%;
		margin-top: -9rpx;
	}

	.jishuq {
		border: 1px solid #999999;
		text-align: center;
		font-size: 32rpx;
	}
</style>